{% extends "layout.html" %}
{% block title %}命令管理{% endblock %}

{% block head %}
<style>
    .command-actions {
        margin-bottom: 25px;
        text-align: right;
    }
    .action-btn {
        text-decoration: none;
        color: #fff;
        padding: 10px 18px;
        border-radius: 5px;
        font-size: 1em;
        transition: background-color 0.2s ease;
        border: none;
        cursor: pointer;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .add-btn {
        background-color: #28a745;
    }
    .add-btn:hover {
        background-color: #218838;
    }
    .command-list {
        list-style-type: none;
        padding: 0;
    }
    .command-list li {
        background-color: #fdfdfd;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    .command-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }
    .command-name {
        font-size: 1.4em;
        font-weight: bold;
        color: #0056b3;
        margin: 0;
    }
    .command-buttons {
        display: flex;
        gap: 10px;
    }
    .command-buttons a, .command-buttons button, .command-buttons form button {
        font-size: 0.9em;
        padding: 8px 12px;
    }
    .copy-btn { background-color: #007bff; }
    .copy-btn:hover { background-color: #0056b3; }
    .edit-btn { background-color: #ffc107; color: #333; }
    .edit-btn:hover { background-color: #e0a800; }
    .delete-btn { background-color: #dc3545; }
    .delete-btn:hover { background-color: #c82333; }
    
    .command-content pre {
        background-color: #f8f8f8;
        border: 1px solid #ddd;
        padding: 15px;
        border-radius: 5px;
        overflow-x: auto;
        font-size: 1em;
        color: #333;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .command-notes {
        font-style: italic;
        color: #666;
        margin-top: 15px;
        border-left: 3px solid #007bff;
        padding-left: 15px;
    }
    .no-commands {
        text-align: center;
        color: #888;
    }
</style>
{% endblock %}

{% block content %}
<h1>命令管理</h1>

<div class="command-actions">
    <a href="{{ url_for('add_command') }}" class="action-btn add-btn">新增命令</a>
</div>

{% if commands %}
    <ul class="command-list">
        {% for command in commands %}
        <li>
            <div class="command-header">
                <h2 class="command-name">{{ command.name }}</h2>
                <div class="command-buttons">
                    <button class="action-btn copy-btn" data-command="{{ command.command }}">复制</button>
                    <a href="{{ url_for('edit_command', command_id=command.id) }}" class="action-btn edit-btn">修改</a>
                    <form action="{{ url_for('delete_command', command_id=command.id) }}" method="post" style="display: inline;" onsubmit="return confirm('确定要删除这个命令吗？');">
                        <button type="submit" class="action-btn delete-btn">删除</button>
                    </form>
                </div>
            </div>
            <div class="command-content">
                <pre><code>{{ command.command }}</code></pre>
            </div>
            {% if command.notes %}
            <div class="command-notes">
                <p><strong>备注:</strong> {{ command.notes }}</p>
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
{% else %}
    <p class="no-commands">还没有任何命令。点击“新增命令”来创建一个吧！</p>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    async function copyToClipboard(text, button) {
        const originalText = button.textContent;
        try {
            if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(text);
            } else {
                const textarea = document.createElement('textarea');
                textarea.value = text;
                textarea.style.position = 'fixed';
                textarea.style.left = '-9999px';
                document.body.appendChild(textarea);
                textarea.focus();
                textarea.select();
                document.execCommand('copy');
                document.body.removeChild(textarea);
            }
            button.textContent = '已复制!';
        } catch (err) {
            console.error('复制失败:', err);
            button.textContent = '复制失败';
        } finally {
            setTimeout(() => {
                button.textContent = originalText;
            }, 2000);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        const copyButtons = document.querySelectorAll('.copy-btn');
        copyButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                const commandText = e.target.dataset.command;
                if (commandText) {
                    copyToClipboard(commandText, e.target);
                }
            });
        });
    });
</script>
{% endblock %}